<template>
    <div id="Statistics">
        <van-tabs v-model="active" color="#007AFF" title-active-color="#007AFF" @click="onClickTab">
            <van-tab title="建房审批" name="建房审批"></van-tab>
            <van-tab title="危房改造" name="危房改造"></van-tab>
            <van-tab title="建房服务" name="建房服务"></van-tab>
        </van-tabs>
        <div class="searchWrap">
            <div class="fieldWrap">
                <span>统计范围</span>
                <van-field style="width: calc(100% - 90px);" :border="false" label-width="0" v-model="cascaderName" is-link
                    readonly label=" " placeholder="请选择" @click="show = true" />
            </div>
            <van-popup v-model="show" round position="bottom">
                <van-cascader v-model="cascaderValue" title="请选择" :options="options" @change="onChange" @finish="onFinish"
                    @close="close" />
            </van-popup>
            <div class="fieldWrap" v-show="active !== '建房服务'">
                <span>统计时间</span>
                <div style="width: calc(100% - 90px);">
                    <van-field style="width: calc(50% - 10px);float: left;" :border="false" label-width="0"
                        v-model="startTime" clearable label="" placeholder="请选择开始时间" @focus="start" />
                    <span style="float: left;line-height: 44px;">-</span>
                    <van-field style="width: calc(50% - 10px);float: left;" :border="false" label-width="0"
                        v-model="endTime" clearable label=" " placeholder="请选择结束时间" @focus="end" />
                </div>
            </div>
            <!-- 开始时间控件 -->
            <van-popup v-model="showStart" position="bottom">
                <van-datetime-picker v-model="currentDate" type="date" @confirm="confirm" @cancel="cancel" />
            </van-popup>
            <!-- 结束时间控件 -->
            <van-popup v-model="showEnd" position="bottom">
                <van-datetime-picker v-model="currentDate1" type="date" @confirm="confirm1" @cancel="cancel1" />
            </van-popup>
        </div>
        <div class="scrollWrap" v-show="active == '建房审批'">
            <div class="title">
                建房审批情况
                <van-button type="info" size="small" @click="isTable = !isTable">{{ isTable ? '图表' : '表格' }}</van-button>
            </div>
            <div v-show="!isTable">
                <ul class="JFSPLIST">
                    <li v-for="(item, index) in JFSPLIST" :key="index">
                        <img :src="item.img" alt="">
                        <p style="color: #1A1A1A;font-size: 18px;">{{ item.name }}</p>
                        <p style="color: #117CD6;font-size: 18px;"><b>{{ item.num }}</b>户</p>
                    </li>
                </ul>
                <div id="jfspEchart"></div>
            </div>
            <div style="padding:10px;background:#fff" v-show="isTable">
                <el-table :data="tableData_jfsp" style="width: 100%;margin-top: 10px;" id="elTable" border>
                    <el-table-column type="index" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="cityName" label="设区市" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="申请建房量（户）" prop="sqzl" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="建房量审批情况（户）" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="cys" label="村预审" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="xzsp" label="乡镇审批" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="wcsp" label="完成审批" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="tj" label="退件" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="审批建筑面积（㎡）" prop="zmj" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                </el-table>
            </div>
            <div class="title">
                建房过程管理
                <van-button type="info" size="small" @click="isTable1 = !isTable1">{{ isTable1 ? '图表' : '表格' }}</van-button>
            </div>
            <div v-show="!isTable1">
                <ul class="JFSPLIST">
                    <li v-for="(item, index) in JSGCLIST" :key="index">
                        <img :src="item.img" alt="">
                        <p style="color: #1A1A1A;font-size: 18px;">{{ item.name }}</p>
                        <p style="color: #117CD6;font-size: 18px;"><b>{{ item.num }}</b>户</p>
                    </li>
                </ul>
                <div class="subMain">
                    <div class="subTitle">
                        <span class="line"></span>
                        未开工情况
                        <!-- <van-button type="info" size="small">导出</van-button> -->
                    </div>
                    <div class="echartTitle">地市统计分析</div>
                    <div class="tzjdEchart">
                        <div id="tzjdPie"></div>
                        <div class="detail">
                            <p v-for="(item, index) in DSTJData" :key="index">
                                <span class="yuan" :style="{ 'backgroundColor': color[index] }"></span>
                                {{ item.name }}<span class="num"><b style="font-size:16px">{{ item.value }}</b>户</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="subMain" style="margin-top: 10px;">
                    <div class="subTitle">
                        <span class="line"></span>
                        施工在建
                        <ul class="tab">
                            <li v-for="(item, index) in JZPM" :key="index" @click="tab(item, index)"
                                :class="{ 'active': JZPMind == index }">
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div id="sgzjEchart"></div>
                </div>
                <div class="subMain" style="margin-top: 10px;">
                    <div class="subTitle">
                        <span class="line"></span>
                        竣工验收
                    </div>
                    <div id="jzpmEchart"></div>
                </div>
                <div class="subMain" style="margin-top: 10px;">
                    <div class="subTitle">
                        <span class="line"></span>
                        业务协同
                    </div>
                    <ul class="ywxtList">
                        <li v-for="(item, index) in YWXTLIST" :key="index" :style="{ backgroundColor: item.bgColor }">
                            <p style="font-size: 18px;"><img :src="item.img" alt="" srcset=""> {{ item.name }}</p>
                            <p>已申请：<span style="font-size: 16px;" :style="{ color: item.color }"><b>{{ item.ysq
                            }}</b>户</span>
                            </p>
                            <p>已发证：<span style="font-size: 16px;" :style="{ color: item.color }"><b>{{ item.ysq
                            }}</b>户</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="padding:10px;background:#fff" v-show="isTable1">
                <div class="subTitle">
                    <span class="line"></span>
                    建设过程管理情况
                </div>
                <el-table :data="tableData_jfgc" style="width: 100%;" id="BuildProcessTable" border stripe>
                    <el-table-column type="index" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="cityName" label="设区市" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="合计" prop="total" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="现场放样" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="xcfyYsq" label="已申请" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="xcfyWcfy" label="已完成" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="xcfyCq" label="超期" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="基槽验线" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="jcysYsq" label="已申请" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="jcysWcfy" label="已完成" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="jcysCq" label="超期" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="一层立模" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="ycmbzcysYsq" label="已申请" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="ycmbzcysWcfy" label="已完成" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="ycmbzcysCq" label="超期" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <div class="subTitle">
                    <span class="line"></span>
                    竣工验收管理情况
                </div>
                <el-table :data="tableData_jfgc" style="width: 100%;" id="BuildCompleteTable" border stripe>
                    <el-table-column type="index" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="cityName" label="设区市" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="竣工验收(户)" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="jgysYsq" label="已申请" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="jgysWcfy" label="已完成" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="jgysCq" label="超期" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="办门牌证(户)" prop="bmpz" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="办不动产权证(户)" prop="bbdcz" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="审批建筑面积(㎡)" prop="jgysspmj" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="竣工验收建筑面积(㎡)" prop="jgysjzmj" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="scrollWrap" v-show="active == '危房改造'">
            <div class="title">
                疑似危房鉴定
                <van-button type="info" size="small" @click="isTable2 = !isTable2">{{ isTable2 ? '图表' : '表格' }}</van-button>
            </div>
            <div v-show="!isTable2">
                <ul class="yswfLIST">
                    <li v-for="(item, index) in YSWFJDLIST" :key="index" :style="{ backgroundColor: item.bgColor }">
                        <p><img :src="item.img" alt=""> {{ item.name }}</p>
                        <p style="font-size: 16px;" :style="{ color: item.color }"><b>{{ item.num }}</b>{{ index == 3 ? '' :
                            '户'
                        }}</p>
                    </li>
                </ul>
                <!-- <div id="jdlEchart" style="height: 80px;background-color: #fff;"></div> -->
                <div id="yswfEchart" style="height: 400px;background-color: #fff;"></div>
            </div>
            <div style="padding:10px;background:#fff" v-show="isTable2">
                <el-table :data="tableData_yswf" style="width: 100%;" border stripe id="dangerousBuildingTableData">
                    <el-table-column type="index" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="cityName" label="设区市" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="初判存在安全隐患" align="center" prop="sqqkHj" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="jdqkWjd" label="未鉴定" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="wtjd" label="委托鉴定" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="name" label="已鉴定" align="center" :show-overflow-tooltip="true">
                        <el-table-column label="小计" align="center" prop="jdqkYjdXj" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="鉴定率" align="center" prop="jdl" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="jdqkYjdAj" label="A级" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="B级" prop="jdqkYjdBj" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="C级" prop="jdqkYjdCj" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="D级" prop="jdqkYjdDj" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <div class="title">
                危房整治
                <van-button type="info" size="small" @click="isTable3 = !isTable3">{{ isTable3 ? '图表' : '表格' }}</van-button>
            </div>
            <div v-show="!isTable3">
                <div class="subMain">
                    <div class="subTitle">
                        <span class="line"></span>
                        治理进度
                    </div>
                    <ul class="JFSPLIST">
                        <li v-for="(item, index) in ZLJDLIST" :key="index" :style="{ backgroundColor: item.bgColor }">
                            <img :src="item.img" alt="">
                            <p style="font-size: 16px;">{{ item.name }}</p>
                            <p style="font-size: 16px;" :style="{ color: item.color }"><b>{{ item.num }}</b>户</p>
                        </li>
                    </ul>
                    <div id="zljdEchart" style="height: 400px;background-color: #fff;"></div>
                </div>
                <div class="subMain" style="margin-top: 10px;">
                    <div class="subTitle">
                        <span class="line"></span>
                        治理方式
                    </div>
                    <div id="zlfsEchart" style="height: 300px;"></div>
                </div>
            </div>
            <div style="padding:10px;background:#fff" v-show="isTable3">
                <div class="subTitle">
                    <span class="line"></span>
                    危房排查整治情况
                </div>
                <el-table :data="tableData_wfzz" style="width: 100%;margin-top: 10px;" id="tR_table" border stripe
                    height="100%">
                    <el-table-column type="index" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="cityName" label="设区市" align="center" :show-overflow-tooltip="true" />
                    <el-table-column label="所有危房" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="qbHjXj" label="危房总数" align="center" :show-overflow-tooltip="true" />
                        <el-table-column label="未完成治理" align="center" :show-overflow-tooltip="true">
                            <el-table-column prop="qbWzzXj" label="小计" align="center" :show-overflow-tooltip="true" />
                            <el-table-column prop="qbWzzHj" label="未治理" align="center" :show-overflow-tooltip="true" />
                            <el-table-column prop="qbZzzHj" label="治理中" align="center" :show-overflow-tooltip="true" />
                        </el-table-column>
                        <el-table-column prop="qbYzzHj" label="已治理" align="center" :show-overflow-tooltip="true" />
                        <el-table-column prop="qbZzwcl" label="治理完成率" align="center" :show-overflow-tooltip="true" />
                    </el-table-column>
                    <el-table-column label="C级" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="qbCjXj" label="C级小计" align="center" :show-overflow-tooltip="true" />
                        <el-table-column label="未完成治理" align="center" :show-overflow-tooltip="true">
                            <el-table-column prop="qbCjWzlXj" label="小计" align="center" :show-overflow-tooltip="true" />
                            <el-table-column prop="qbCjWzlWzl" label="未治理" align="center" :show-overflow-tooltip="true" />
                            <el-table-column prop="qbCjWzlZlz" label="治理中" align="center" :show-overflow-tooltip="true" />
                        </el-table-column>
                        <el-table-column prop="qbCjYzl" label="已治理" align="center" :show-overflow-tooltip="true" />
                        <el-table-column prop="qbCjZlwcl" label="治理完成率" align="center" :show-overflow-tooltip="true" />
                    </el-table-column>
                    <el-table-column label="D级" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="qbDjXj" label="D级小计" align="center" :show-overflow-tooltip="true" />
                        <el-table-column label="未完成治理" align="center" :show-overflow-tooltip="true">
                            <el-table-column prop="qbDjWzlXj" label="小计" align="center" :show-overflow-tooltip="true" />
                            <el-table-column prop="qbDjWzlWzl" label="未治理" align="center" :show-overflow-tooltip="true" />
                            <el-table-column prop="qbDjWzlZlz" label="治理中" align="center" :show-overflow-tooltip="true" />
                        </el-table-column>
                        <el-table-column prop="qbDjYzl" label="已治理" align="center" :show-overflow-tooltip="true" />
                        <el-table-column prop="qbDjZlwcl" label="治理完成率" align="center" :show-overflow-tooltip="true" />
                    </el-table-column>
                </el-table>
                <div class="subTitle">
                    <span class="line"></span>
                    危房整治措施情况表
                </div>
                <el-table :data="tableData_zlfs" style="width: 100%;margin-top: 10px;" id="CdMeasuresTableData" border
                    stripe>
                    <el-table-column type="index" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="cityName" label="设区市" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="全部危房" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="qbHjXj" label="危房总数" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="name" label="已整治" align="center" :show-overflow-tooltip="true">
                            <el-table-column prop="qbYzzHj" label="合计" align="center" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column prop="name" label="管理措施" align="center" :show-overflow-tooltip="true">
                                <el-table-column prop="qbYzzGlcsXj" label="小计" align="center" :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column prop="qbYzzGlcsJkfw" label="监控防危" align="center"
                                    :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column prop="qbYzzGlcsTkfk" label="腾空防控" align="center"
                                    :show-overflow-tooltip="true">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="name" label="工程措施" align="center" :show-overflow-tooltip="true">
                                <el-table-column prop="qbYzzGccsXj" label="小计" align="center" :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column prop="qbYzzGccsCcaz" label="拆除安置" align="center"
                                    :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column prop="qbYzzGccsCccj" label="拆除重建" align="center"
                                    :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column prop="qbYzzGccsCcms" label="拆除灭失" align="center"
                                    :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column prop="qbYzzGccsXsjg" label="修缮加固" align="center"
                                    :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column prop="qbYzzGccsQt" label="其他" align="center" :show-overflow-tooltip="true">
                                </el-table-column>
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <div class="title">
                困难群众补助
                <van-button type="info" size="small" @click="isTable4 = !isTable4">{{ isTable4 ? '图表' : '表格' }}</van-button>
            </div>
            <div v-show="!isTable4">
                <div class="subMain">
                    <ul class="KNQZLIST">
                        <li v-for="(item, index) in KNQZLIST" :key="index">
                            <p><img :src="item.img" alt=""></p>
                            <p style="font-size: 16px;"><span :style="{ color: item.color }"><b>{{ item.num }}</b>{{
                                item.unit
                            }}</span><span>{{ item.name }}</span></p>
                        </li>
                    </ul>
                    <div id="pieCharts1" style="width:100%;height:150px"></div>
                    <div id="pieCharts2" style="width:100%;height:150px"></div>
                </div>
                <div class="subMain" style="margin-top: 10px;">
                    <div class="subTitle">
                        <span class="line"></span>
                        补助情况
                        <ul class="tab">
                            <li v-for="(item, index) in JZPM1" :key="index" @click="tab(item, index)"
                                :class="{ 'active': JZPMind == index }">
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div id="buqkEchart" style="height: 400px;"></div>
                </div>
            </div>
            <div style="padding:10px;background:#fff" v-show="isTable4">
                <el-table :data="tableData_hnjtbz" style="width: 100%;margin-top: 10px;" id="DifficultPeople" border stripe
                    height="100%">
                    <el-table-column type="index" label="序号" width="60" />
                    <el-table-column prop="cityName" label="设区市" align="center" :show-overflow-tooltip="true" />
                    <el-table-column label="各级补助资金" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="totalAmountxj" label="小计（单位：万元）" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="totalAmount" label="小计（单位：元）" align="center" :show-overflow-tooltip="true" />
                        <el-table-column prop="personNum" label="惠及困难家庭户数" align="center" :show-overflow-tooltip="true" />
                        <el-table-column prop="provincePersonNum" label="省级补助户数" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="provinceAmount" label="省级补助（单位：元）" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="cityPersonNum" label="市级补助户数" align="center" :show-overflow-tooltip="true" />
                        <el-table-column prop="cityAmount" label="市级补助（单位：元）" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="countyPersonNum" label="县级补助户数" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="countyAmount" label="县级补助（单位：元）" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="townPersonNum" label="乡镇补助户数" align="center" :show-overflow-tooltip="true" />
                        <el-table-column prop="townAmount" label="乡镇补助（单位：元）" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="villagePersonNum" label="村级补助户数" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="villageAmount" label="村级补助（单位：元）" align="center"
                            :show-overflow-tooltip="true" />
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="scrollWrap JFFWWrap" v-show="active == '建房服务'">
            <div class="title">
                工匠服务
                <van-button type="info" size="small" @click="isTable5 = !isTable5">{{ isTable5 ? '图表' : '表格' }}</van-button>
            </div>
            <div v-show="!isTable5">
                <div id="GJFWEchart" style="width:100%;height:200px;background-color:#fff"></div>
                <div class="subMain">
                    <div class="subTitle">
                        <span class="line"></span>
                        按区域统计
                    </div>
                    <div id="AQTJEchart" style="width:100%;height:400px"></div>
                </div>
            </div>
            <div style="padding:10px;background:#fff" v-show="isTable5">
                <el-table :data="tableData_gj" style="width: 100%;margin-top: 10px;" id="elTableGJ" border stripe
                    height="100%">
                    <el-table-column type="index" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="CITYNAME" label="设区市" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="工匠总数" align="center" prop="num" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="A级" align="center" prop="ANUM" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="B级" align="center" prop="BNUM" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="C级" align="center" prop="CNUM" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="D级" align="center" prop="DNUM" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="其他" align="center" prop="OTHERNUM" :show-overflow-tooltip="true">
                    </el-table-column>
                </el-table>
            </div>
            <div class="title">
                图集服务
                <van-button type="info" size="small" @click="isTable6 = !isTable6">{{ isTable5 ? '图表' : '表格' }}</van-button>
            </div>
            <div v-show="!isTable6">
                <ul class="JFSPLIST1">
                    <li v-for="(item, index) in TJFWLIST" :key="index">
                        <p style="color: #1A1A1A;font-size: 16px;"><img :src="item.img" alt=""> {{ item.name }}</p>
                        <p style="color: #117CD6;font-size: 16px;" :style="index === 2 ? 'margin-top: 20px' : ''"><b>{{
                            item.num
                        }}</b>套</p>
                        <p style="color: #117CD6;font-size: 16px;" v-if="index != 2"><b>{{ item.num1 }}</b>次</p>
                    </li>
                </ul>
                <div class="subMain" style="margin-top: 10px;">
                    <div class="subTitle">
                        <span class="line"></span>
                        按区域统计
                        <!-- <van-button type="info" size="small">导出</van-button> -->
                    </div>
                    <div id="aqytjEchart" style="height: 400px;"></div>
                </div>
            </div>
            <div style="padding:10px;background:#fff" v-show="isTable6">
                <el-table :data="tableData_tj" style="width: 100%;margin-top: 10px;" id="AtlasUseTable" border stripe
                    height="100%">
                    <el-table-column type="index" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="CITYNAME" label="设区市" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="合计" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="total" label="套数" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="totalUse" label="使用次数" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="通用设计图集（平面）" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="commonTotal" label="套数" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="commonUse" label="使用次数" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="VR图集" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="vrTotal" label="套数" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="vrUse" label="使用次数" align="center" :show-overflow-tooltip="true">
                        </el-table-column>

                    </el-table-column>
                    <el-table-column label="第三方图集" align="center" :show-overflow-tooltip="true">
                        <el-table-column prop="threeTotal" label="套数" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import dd from 'gdt-jsapi';
export default {
    data() {
        return {
            active: '建房审批',
            showType: '',
            show: false,
            cascaderValue: "330000000000",
            cascaderName: "",
            options: [{
                value: 330000000000,
                text: "惠州市",
                children: null,
            }],
            minDate: null,       //时间组件可选范围
            maxDate: null,
            date: '',
            currentDate: new Date(),
            currentDate1: new Date(),
            startTime: '',
            endTime: '',
            showStart: false,
            showEnd: false,
            isTable: false,
            isTable1: false,
            isTable2: false,
            isTable3: false,
            isTable4: false,
            isTable5: false,
            isTable6: false,
            JFSPLIST: [{
                img: "./static/imgs/Statistics/1.png",
                name: "申请建房量",
                num: 0
            }, {
                img: "./static/imgs/Statistics/2.png",
                name: "完成审批",
                num: 0
            }, {
                img: "./static/imgs/Statistics/3.png",
                name: "退件",
                num: 0
            }],
            tableData_jfsp: [],
            JSGCLIST: [{
                img: "./static/imgs/Statistics/4.png",
                name: "未开工",
                num: 0
            }, {
                img: "./static/imgs/Statistics/5.png",
                name: "施工在建",
                num: 0
            }, {
                img: "./static/imgs/Statistics/6.png",
                name: "竣工验收",
                num: 0
            }],
            tableData_jfgc: [],
            YWXTLIST: [{
                img: "./static/imgs/Statistics/7.png",
                name: "电子门牌",
                color: "#02C9B4",
                bgColor: "#DBFFFB",
                ysq: 0,
                yfz: 0
            }, {
                img: "./static/imgs/Statistics/8.png",
                name: "不动产权证",
                color: "#117CD6",
                bgColor: "#E6F5FF",
                ysq: 0,
                yfz: 0
            }],
            YSWFJDLIST: [{
                img: "./static/imgs/Statistics/14.png",
                name: "疑似危房",
                color: "#C89936",
                bgColor: "#FFF1D3",
                num: 0,
            }, {
                img: "./static/imgs/Statistics/15.png",
                name: "已鉴定",
                color: "#02C9B4",
                bgColor: "#DBFFFB",
                num: 0,
            }, {
                img: "./static/imgs/Statistics/16.png",
                name: "未鉴定",
                color: "#F05A4A",
                bgColor: "#FFF1EF",
                num: 0,
            }, {
                img: "./static/imgs/Statistics/17.png",
                name: "鉴定率",
                color: "#188BD9",
                bgColor: "#E6F5FF",
                num: 0,
            }],
            tableData_yswf: [],
            ZLJDLIST: [{
                img: "./static/imgs/Statistics/18.png",
                name: "已治理",
                color: "#02C9B4",
                bgColor: "#DBFFFB",
                num: 0,
            }, {
                img: "./static/imgs/Statistics/19.png",
                name: "治理中",
                color: "#C89936",
                bgColor: "#FFF1D3",
                num: 0,
            }, {
                img: "./static/imgs/Statistics/20.png",
                name: "未治理",
                color: "#F05A4A",
                bgColor: "#FFF1EF",
                num: 0,
            }],
            tableData_wfzz: [],
            tableData_zlfs: [],
            KNQZLIST: [{
                img: "./static/imgs/Statistics/21.png",
                name: "补助户数",
                unit: "户",
                color: "#02C9B4",
                num: 0,
            }, {
                img: "./static/imgs/Statistics/22.png",
                name: "补助金额",
                unit: "元",
                color: "#C89936",
                num: 0,
            }],
            tableData_hnjtbz: [],
            tableData_gj: [],
            tableData_tj: [],
            TJFWLIST: [{
                img: "./static/imgs/Statistics/9.png",
                name: "通用图集",
                num: 0,
                num1: 0,
            }, {
                img: "./static/imgs/Statistics/10.png",
                name: "其中VR",
                num: 0,
                num1: 0,
            }, {
                img: "./static/imgs/Statistics/11.png",
                name: "第三方图集",
                num: 0,
                num1: 0,
            }],
            color: ["#1B8AE7", "#F59C05", "#14D1B4", "#FFDA99", "#00B2ED", "#F1896F", "#A486FA", "#03CE61", "#E4C4FF", "#F05A4A", "#F8DA5B"],
            DSTJData: [],
            JZPMind: 0,
            JZPM: [{
                name: "按阶段"
            }, {
                name: "按区域"
            }],
            JZPM1: [{
                name: "按金额"
            }, {
                name: "按户数"
            }],
        }
    },
    components: {},
    watch: {
        show(n, o) {
            if (!this.show) {
                this.init()
            }
        },
        showStart(n, o) {
            if (!this.showStart) {
                this.init()
            }
        },
        showEnd(n, o) {
            if (!this.showEnd) {
                this.init()
            }
        }
    },
    computed: {},
    methods: {
        onClickTab(value) {
            console.log(value)
            this.active = value
            this.$nextTick(() => {
                this.init()
            })
        },
        init() {
            switch (this.active) {
                case "建房审批":
                    this.getJSJDChart();
                    this.getJFGCGLData();
                    this.getWKGChart();
                    this.getJZPMChart();
                    this.getSGZJChart();
                    this.getJSGCGLData()
                    break;
                case "危房改造":
                    this.getYSWFJDData();
                    // this.getYSWFJDWJDData()
                    this.getWFZZData()
                    this.getZLFSData()
                    this.getKNQZData()
                    break;
                case "建房服务":
                    this.getGJFWData();
                    this.getTJFWData()
                    break;
                default:
                    break;
            }
        },
        //获取行政区划
        getCitesData(code, data) {
            axios
                .get(window.g.BaseURL + "/api/rescatalog/gsaCodeCity/listForTree/" + code, {
                    headers: {
                        isOutParam: true,
                    },
                })
                .then((response) => {
                    response.data.data.forEach(item => {
                        data.push({
                            value: item.citycode,
                            text: item.cityname,
                            selected: true,
                            children: code.toString().replace(/(0+)$/g, "").length >= 4 ? null : [],
                        })
                    })
                    console.log(data)
                })
                .catch((e) => { });
        },
        onChange({ value, selectedOptions }) {
            this.cascaderValue = value;
            this.cascaderName = selectedOptions[selectedOptions.length - 1].text;
            if (value.toString().substring(0, 12) === "330000000000")
                this.showType = ""
            else if (value.toString().substring(4, 12) === "00000000")
                this.showType = 2;
            else if (nowUserCode.substring(6, 12) === "000000")
                this.showType = 3;
            if (selectedOptions[selectedOptions.length - 1].children.length > 0) {

            } else {
                this.getCitesData(value, selectedOptions[selectedOptions.length - 1].children)
            }
        },
        onFinish({ value, selectedOptions }) {
            this.cascaderValue = value;
            this.cascaderName = selectedOptions[selectedOptions.length - 1].text;
            this.show = false;
        },
        close() {
            this.show = false;
        },
        // 选择开始时间
        start(e) {
            this.showStart = true;
        },
        // 选择结束时间
        end(e) {
            this.showEnd = true;
        },
        //日期格式
        formatDate(date) {
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
        },
        //确认开始日期
        confirm(date) {
            this.showStart = false
            this.startTime = this.formatDate(this.currentDate)
        },
        //确认结束日期
        confirm1(date) {
            this.showEnd = false
            this.endTime = this.formatDate(this.currentDate1)
        },
        cancel() {
            this.showStart = false;
            this.startTime = ""
        },
        cancel1() {
            this.showEnd = false
            this.endTime = ""
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            }
            return value;
        },
        showPopup(item) {
            this.videoUrl = item.url
            this.show = true;
        },
        // --------------------
        //建房审批情况
        getJSJDChart: async function () {
            let axisData = [], data = [{
                name: '村预审',
                data: []
            }, {
                name: '乡镇审批',
                data: []
            }, {
                name: '完成审批',
                data: []
            }, {
                name: '退件',
                data: []
            }];
            let res = await axios.get(`${window.g.BaseURL}api/farmerHouse/excelData/houseBuild/work/v2?cityCodes=${this.cascaderValue}&startTime=${this.startTime}&endTime=${this.endTime}&showType=${this.showType}`,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            );
            if (res.data.code == 200) {
                this.tableData_jfsp = res.data.data
                res.data.data.forEach((item, index) => {
                    if (index == 0) {
                        this.JFSPLIST[0].num = item.sqzl;
                        this.JFSPLIST[1].num = item.wcsp
                        this.JFSPLIST[2].num = item.tj
                    } else {
                        axisData.unshift(item.cityName);
                        data[0].data.unshift(item.cys);
                        data[1].data.unshift(item.xzsp);
                        data[2].data.unshift(item.wcsp);
                        data[3].data.unshift(item.tj)
                    }
                })
                this.getBarChart(axisData, data, 'jfspEchart')
            }
        },
        //建房过程管理
        getJFGCGLData: async function () {
            let data = [], num = 0;
            let params = { "chartId": "d51d44fef3024930a18f0c45a97144ee", "complexQueryModels": [{ "key": "CITYCODE", "value": this.cascaderValue }, { "key": "TYPE", "value": "审批建房-二级-头部-类型" }, { "key": "YEAR", "value": "" }] }
            axios.post(`${window.g.BaseURL}api/charts/gsaDataChart/getDataByChartSql`, params,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200 && res.data.data.seriesData) {
                    let data = res.data.data.seriesData[0].data
                    data.forEach(item => {
                        if (item.name == "竣工验收") {
                            this.JSGCLIST[2].num = item.value;
                        } else if (item.name == "施工在建") {
                            this.JSGCLIST[1].num = item.value;
                        } else if (item.name == "批而未建") {
                            this.JSGCLIST[0].num = item.value;
                        }
                    })
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });
        },
        //未开工情况
        getWKGChart: async function () {
            let data = [], num = 0;
            let params = {
                "chartId": "e7b52b56dce711ed87aa2cf05de12345",
                "complexQueryModels": [
                    { "key": "CITYCODE", "value": this.cascaderValue ? this.cascaderValue : '330000000000' }
                ]
            }
            axios.post(`${window.g.BaseURL}api/charts/gsaDataChart/getDataByChartSql`, params,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200 && res.data.data.seriesData) {
                    res.data.data.seriesData.forEach((item, index) => {
                        data.push({
                            name: item.cityname,
                            value: item.num
                        });
                        num += item.num;
                    })
                    // this.JSGCLIST[0].num = num;
                    this.getDSTJFXEchart(num, data)
                    this.DSTJData = data;
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });
        },
        //建房过程管理
        getJSGCGLData: async function () {
            let this_ = this;
            axios.get(`${window.g.BaseURL}api/farmerHouse/excelData/houseBuild/manager/v2?cityCodes=${this.cascaderValue}&startTime=${this.startTime}&endTime=${this.endTime}&showType=${this.showType}`,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200) {
                    this.tableData_jfgc = res.data.data;
                    // this.JSGCLIST[1].num = res.data.data[0].total
                    // this.JSGCLIST[2].num = res.data.data[0].jgysWcfy
                    this.SGJZData = res;
                    this.getSGZJChart(res)
                    let axisData = [], data1 = []
                    res.data.data.forEach((item, index) => {
                        if (index == 0) {
                        } else {
                            axisData.unshift(item.cityName);
                            data1.unshift(Number(item.jgysWcfy));
                        }
                    })
                    this.getJZPMChart(axisData, data1, 'jzpmEchart')
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });
        },
        //疑似危房鉴定
        getYSWFJDData: async function () {
            let this_ = this;
            let axisData = [], data = [{
                name: 'A级',
                data: []
            }, {
                name: 'B级',
                data: []
            }, {
                name: 'C级',
                data: []
            }, {
                name: 'D级',
                data: []
            }, {
                name: '疑似危房',
                data: []
            }];
            axios.get(`${window.g.BaseURL}api/farmerHouse/excelData/houseDangerous/houseRemoldCount?cityCodes=${this.cascaderValue}&startTime=${this.startTime}&endTime=${this.endTime}&showType=${this.showType}`,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200) {
                    this.tableData_yswf = res.data.data
                    res.data.data.forEach((item, index) => {
                        if (index == 0) {
                            this.YSWFJDLIST[0].num = item.sqqkHj;
                            this.YSWFJDLIST[1].num = item.jdqkYjdXj
                            this.YSWFJDLIST[2].num = item.jdqkWjd
                            this.YSWFJDLIST[3].num = item.jdl
                            // this.getJDLChart(Number(item.jdl.replace("%", '')))
                        } else {
                            axisData.unshift(item.cityName);
                            data[0].data.unshift(item.jdqkYjdAj);
                            data[1].data.unshift(item.jdqkYjdBj);
                            data[2].data.unshift(item.jdqkYjdCj);
                            data[3].data.unshift(item.jdqkYjdDj)
                            data[4].data.unshift(item.sqqkHj)
                        }
                    })
                    this.getBarChart(axisData, data, 'yswfEchart')
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });

        },
        //疑似危房鉴定 -未委托
        getYSWFJDWJDData: async function () {
            let params = {
                "chartId": "f8168c6e-488c-45c1-c56e-472bdea12345",
                "complexQueryModels": [
                    { "key": "CITYCODE", "value": this.cascaderValue ? this.cascaderValue : '330000000000' }
                ]
            }
            axios.post(`${window.g.BaseURL}api/charts/gsaDataChart/getDataByChartSql`, params,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200 && res.data.data.seriesData) {
                    this.YSWFJDLIST[2].num = res.data.data.seriesData[0].wwt
                    this.YSWFJDLIST[3].num = res.data.data.seriesData[0].ywt
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });
        },
        //危房整治
        getWFZZData: async function () {
            let this_ = this;
            let axisData = [], data = [{
                name: '已治理',
                data: []
            }, {
                name: '治理中',
                data: []
            }, {
                name: '未治理',
                data: []
            }, {
                name: '危房总数',
                data: []
            }];
            axios.get(`${window.g.BaseURL}api/farmerHouse/excelData/houseDangerous/houseRemoldCheck?cityCodes=${this.cascaderValue}&startTime=${this.startTime}&endTime=${this.endTime}&showType=${this.showType}`,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200) {
                    this.tableData_wfzz = res.data.data
                    res.data.data.forEach((item, index) => {
                        if (index == 0) {
                            this.ZLJDLIST[0].num = item.qbYzzHj;
                            this.ZLJDLIST[1].num = item.qbZzzHj
                            this.ZLJDLIST[2].num = item.qbWzzHj
                        } else {
                            axisData.unshift(item.cityName);
                            data[0].data.unshift(item.qbYzzHj);
                            data[1].data.unshift(item.qbZzzHj);
                            data[2].data.unshift(item.qbWzzHj);
                            data[3].data.unshift(item.qbHjXj)
                        }
                    })
                    this.getBarChart(axisData, data, 'zljdEchart')
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });

        },
        //治理方式
        getZLFSData: async function () {
            let this_ = this;
            let axisData = [], data = [{
                name: '监控防危',
                value: 0
            }, {
                name: '腾空防控',
                value: 0
            }, {
                name: '拆除安置',
                value: 0
            }, {
                name: '拆除重建',
                value: 0
            }, {
                name: '拆除灭失',
                value: 0
            }, {
                name: '修缮加固',
                value: 0
            }, {
                name: '其他',
                value: 0
            }];
            axios.get(`${window.g.BaseURL}api/farmerHouse/excelData/houseDangerous/houseRepairCDPlanAll?cityCodes=${this.cascaderValue}&startTime=${this.startTime}&endTime=${this.endTime}&showType=${this.showType}`,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200) {
                    this.tableData_zlfs = res.data.data
                    res.data.data.forEach((item, index) => {
                        if (index == 0) {
                            data[0].value = item.qbYzzGlcsJkfw;
                            data[1].value = item.qbYzzGlcsTkfk;
                            data[2].value = item.qbYzzGccsCcaz;
                            data[3].value = item.qbYzzGccsCccj;
                            data[4].value = item.qbYzzGccsCcms;
                            data[5].value = item.qbYzzGccsXsjg;
                            data[6].value = item.qbYzzGccsQt;
                        }
                    })
                    this.getZLFSChart(data)
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });

        },
        //困难群众
        getKNQZData: async function () {
            let this_ = this;
            let axisData = [], data = [{
                name: '省级资金',
                data: []
            }, {
                name: '地市资金',
                data: []
            }, {
                name: '区县资金',
                data: []
            }, {
                name: '乡镇资金',
                data: []
            }], Y = [];
            axios.post(`${window.g.BaseURL}api/farmerHouse/difficultyFamily/supplyCount?cityCode=${this.cascaderValue}&startDate=${this.startTime}&endDate=${this.endTime}`,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200) {
                    this.tableData_hnjtbz = res.data.data
                    res.data.data.forEach((item, index) => {
                        if (index == 0) {
                            this.KNQZLIST[0].num = item.personNum;
                            this.KNQZLIST[1].num = item.totalAmount;

                            this.getKNQZBZChart(item.personNum, [{
                                name: "省级",
                                value: item.provincePersonNum
                            }, {
                                name: "区县",
                                value: item.countyPersonNum
                            }, {
                                name: "地市",
                                value: item.cityPersonNum
                            }, {
                                name: "乡镇",
                                value: item.townPersonNum
                            }], "pieCharts1", "户")
                            this.getKNQZBZChart(item.totalAmount, [{
                                name: "省级",
                                value: item.provinceAmount
                            }, {
                                name: "区县",
                                value: item.countyAmount
                            }, {
                                name: "地市",
                                value: item.cityAmount
                            }, {
                                name: "乡镇",
                                value: item.townAmount
                            }], "pieCharts2", "元")
                        } else {
                            axisData.unshift(item.cityName);
                            data[0].data.unshift(item.provinceAmount);
                            data[1].data.unshift(item.cityAmount);
                            data[2].data.unshift(item.countyAmount);
                            data[3].data.unshift(item.townAmount)
                            Y.unshift(item.personNum);
                        }
                    })
                    this.BZQKX = axisData;
                    this.BZQKY = Y;
                    this.BZQKDATA = data;
                    this.getBarChart(axisData, data, 'buqkEchart')
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });

        },
        //工匠服务
        getGJFWData: async function () {
            let this_ = this;
            let axisData = [], data = [{
                name: "A级",
                value: 0,
                data: [],
            }, {
                name: "B级",
                value: 0,
                data: [],
            }, {
                name: "C级",
                value: 0,
                data: [],
            }, {
                name: "D级",
                value: 0,
                data: [],
            }, {
                name: "其他",
                value: 0,
                data: [],
            }];
            let params = {
                "chartId": "04024780493911edaef82cf05de0e498",
                "complexQueryModels": [
                    { "key": "citycode", "value": this.cascaderValue ? this.cascaderValue : '330000000000' }
                ]
            }
            axios.post(`${window.g.BaseURL}api/charts/gsaDataChart/getDataByChartSql`, params,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200 && res.data.data.seriesData) {
                    this.tableData_gj = res.data.data.seriesData
                    res.data.data.seriesData.forEach((item, index) => {
                        if (index == 0) {
                            data[0].value = item.ANUM;
                            data[1].value = item.BNUM;
                            data[2].value = item.CNUM;
                            data[3].value = item.DNUM;
                            data[4].value = item.OTHERNUM;
                            this.getKNQZBZChart(item.num, data, "GJFWEchart", "人")
                        } else {
                            axisData.unshift(item.CITYNAME);
                            data[0].data.unshift(item.ANUM);
                            data[1].data.unshift(item.BNUM);
                            data[2].data.unshift(item.CNUM);
                            data[3].data.unshift(item.DNUM);
                            data[4].data.unshift(item.OTHERNUM)
                        }
                    })
                    this.getBarChart(axisData, data, 'AQTJEchart')
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });

        },
        //图集服务
        getTJFWData: async function () {
            let this_ = this;
            let axisData = [], data = [{
                name: "通用图集",
                data: [],
            }, {
                name: "VR图集",
                data: [],
            }, {
                name: "第三方图集",
                data: [],
            }];
            this.loading = true
            let params = {
                "chartId": "04024780493911edaef82cf05de0e49811",
                "complexQueryModels": [
                    { "key": "CITYCODE", "value": this.cascaderValue ? this.cascaderValue : '330000000000' }
                ]
            }
            axios.post(`${window.g.BaseURL}api/charts/gsaDataChart/getDataByChartSql`, params,
                {
                    headers: {
                        isOutParam: true,
                    },
                }
            ).then(res => {
                if (res.data.code == 200 && res.data.data.seriesData) {
                    this.tableData_tj = res.data.data.seriesData
                    res.data.data.seriesData.forEach((item, index) => {
                        if (index == 0) {
                            this.TJFWLIST[0].num = item.commonTotal;
                            this.TJFWLIST[0].num1 = item.commonUse;
                            this.TJFWLIST[1].num = item.vrTotal;
                            this.TJFWLIST[1].num1 = item.vrUse;
                            this.TJFWLIST[2].num = item.threeTotal;
                        } else {
                            axisData.unshift(item.CITYNAME);
                            data[0].data.unshift(item.commonTotal);
                            data[1].data.unshift(item.vrTotal);
                            data[2].data.unshift(item.threeTotal);
                        }
                    })
                    this.getBarChart(axisData, data, 'aqytjEchart')
                }
            }).catch((error) => {
                console.error(
                    error
                );
            });

        },
        //------------------------------------------
        //困难群众补助
        getKNQZBZChart: async function (num, data, ele, unit) {
            let this_ = this;
            const option = {
                legend: {
                    type: "scroll",
                    orient: "vertical",
                    right: "10",
                    top: "center",
                    icon: "circle", //设置为圆，删除则为矩形
                    itemWidth: 8,
                    itemHeight: 8,
                    data: data.map(item => item.name),
                    formatter: function (params) {
                        for (var i = 0; i < data.length; i++) {
                            if (params === data[i].name) {
                                return '{name|' + params + '}{value|' + data[i].value + '}{unit|' + unit + '}'
                            }
                        }
                    },
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 14,
                                fontWeight: 400,
                                width: 90,
                            },
                            value: {
                                align: 'right',
                                fontSize: 16,
                                fontWeight: 'bold',
                            },
                            unit: {
                                fontSize: 14,
                            },
                        }
                    }
                },
                tooltip: {
                    trigger: "item",
                },
                series: [
                    {
                        type: "pie",
                        center: ["25%", "50%"],
                        radius: ["50%", "80%"],
                        clockwise: false,
                        avoidLabelOverlap: false,
                        hoverOffset: 15,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return this_.color[params.dataIndex];
                                },
                            },
                        },
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 14,
                            color: "#000",
                            formatter() {
                                return '{num|' + num + unit + '}\n{unit|总数}'
                            },
                            rich: {
                                num: {
                                    fontSize: 18,
                                    color: "#117CD6",
                                },
                                unit: {
                                    fontSize: 14,
                                    color: "#1a1a1a",
                                },
                            }
                        },
                        labelLine: {
                            show: false,
                            length: 0,
                            length2: 0,
                        },
                        data: data,
                        animationDuration: 2800,
                        animationEasing: "cubicInOut",
                    },
                ],
            };
            const element = this.$echarts.init(document.getElementById(ele));
            if (element) {
                element.clear();
                element.setOption(option);
            }
        },
        //进展排名切换
        tab(item, index) {
            this.JZPMind = index;
            if (this.active == "建房审批") {
                this.getSGZJChart(this.SGJZData);
            } else if (this.active == "危房改造") {
                index == 0 ? this.getBarChart(this.BZQKX, this.BZQKDATA, 'buqkEchart', '元') : this.getJZPMChart(this.BZQKX, this.BZQKY, 'buqkEchart', '户')
            }

        },
        //进展排名
        getSGZJChart: async function (data) {
            let this_ = this;
            if (this.JZPMind == 0) {
                let axisData = ['定位放样', '基槽验线', '一层立模', '申请竣工验收'], yData = [Number(data.data.data[0].xcfyYsq) + Number(data.data.data[0].xcfyWcfy), Number(data.data.data[0].jcysYsq) + Number(data.data.data[0].jcysWcfy), Number(data.data.data[0].ycmbzcysYsq) + Number(data.data.data[0].ycmbzcysWcfy), Number(data.data.data[0].jgysYsq)];
                let option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
                        },
                    },
                    barWidth: 18,
                    grid: {
                        top: "30",
                        left: "3%",
                        right: "10",
                        bottom: "10",
                        containLabel: true,
                    },
                    xAxis: {
                        name: '户',
                        type: "category",
                        data: axisData,
                        axisLine: {
                            lineStyle: {
                                color: "#CDCDCD",
                            },
                        },
                        axisTick: "none",
                        axisLabel: {
                            interval: 0,
                            color: "#1A1A1A"
                        },
                    },
                    yAxis: {
                        type: "value",
                        minInterval: 1,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            color: "#1A1A1A"
                        },
                    },
                    series: [
                        {
                            name: '',
                            stack: 'total',
                            type: "bar",
                            label: {
                                show: true,
                                position: "top",
                                color: "#1A1A1A",
                                formatter: function (params) {//核心部分 formatter 可以为字符串也可以是回调
                                    if (params.value != 0) {//如果当前值存在则拼接
                                        return params.value
                                    } else {//否则返回个空
                                        return '';
                                    }
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: new this_.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                        {
                                            offset: 1,
                                            color: "#3BAFFF"
                                        },
                                        {
                                            offset: 0,
                                            color: "#047AFF"
                                        }
                                    ])
                                }
                            },
                            data: yData,
                        },
                    ],
                }
                const element = this.$echarts.init(document.getElementById("sgzjEchart"));
                if (element) {
                    element.clear();
                    element.setOption(option);
                }
            } else {
                let axisData = [], data1 = [{
                    name: '定位放样',
                    data: []
                }, {
                    name: '基槽验线',
                    data: []
                }, {
                    name: '一层立模',
                    data: []
                }, {
                    name: '申请竣工验收',
                    data: []
                }];
                data.data.data.forEach((item, index) => {
                    if (index == 0) {
                    } else {
                        axisData.unshift(item.cityName);
                        data1[0].data.unshift(Number(item.xcfyYsq) + Number(item.xcfyWcfy));
                        data1[1].data.unshift(Number(item.jcysYsq) + Number(item.jcysWcfy));
                        data1[2].data.unshift(Number(item.ycmbzcysYsq) + Number(item.ycmbzcysWcfy));
                        data1[3].data.unshift(Number(item.jgysYsq));
                    }
                })
                this.getBarChart(axisData, data1, 'sgzjEchart')
            }

        },
        //
        getBarChart(axisData, data, ele, unit) {
            let legend = [], series = [], num = [], selected = {};
            let this_ = this
            let color = ele == 'zljdEchart' ? ["#14D1B4", "#F8DA5B", "#F05A4A", "#1B8AE7"] : (ele == 'yswfEchart' ? ["#1B8AE7", "#14D1B4", "#FF9000", "#F05A4A", "#999999"] : this_.color)
            function getSeries(selecte) {
                legend = [], series = [], num = []
                data.forEach((item, index) => {
                    legend.push(item.name);
                    series.push({
                        name: item.name,
                        stack: 'total',
                        type: "bar",
                        label: {
                            // show: true,
                            distance: 2,
                            position: "insideRight",
                            color: "#1A1A1A",
                            formatter: function (params) {//核心部分 formatter 可以为字符串也可以是回调
                                if (params.value != 0) {//如果当前值存在则拼接
                                    return params.value
                                } else {//否则返回个空
                                    return '';
                                }
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: color[index]
                            }
                        },
                        data: item.data,
                    })
                    item.data.forEach((it, ind) => {
                        if (selecte && selecte[item.name]) {
                            let num1 = num[ind] ? num[ind] : 0
                            num[ind] = num1 += it
                        } else if (!selecte) {
                            let num1 = num[ind] ? num[ind] : 0
                            num[ind] = num1 += it
                        }
                    })
                })
                series.push({
                    name: '总数',//未完成
                    type: 'bar',
                    stack: '',
                    label: {
                        normal: {      // 重写未完成label，通过计算属性重新给formatter赋值，返回
                            show: true,  // 计算的总数
                            position: 'right',
                            textStyle: { color: '#1A1A1A' }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(128, 128, 128, 0)'// 设置背景颜色为透明
                        }
                    },
                    data: num,
                    z: -1,
                    barGap: '-100%'
                })
            }
            getSeries()
            const option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
                    },
                },
                barWidth: 12,
                legend: {
                    data: legend,
                    selected: selected,
                    textStyle: {
                        color: "#1A1A1A",
                    },
                    y: "bottom",
                    x: "right",
                    icon: "rect",
                    itemWidth: 10,  // 设置宽度
                    itemHeight: 10, // 设置高度
                    itemGap: 10 // 设置间距
                },
                grid: {
                    top: "10",
                    left: "3%",
                    right: "40",
                    bottom: "40",
                    containLabel: true,
                },
                xAxis: {
                    name: unit ? unit : '',
                    type: "value",
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#CDCDCD",
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        color: "#1A1A1A"
                    },
                },
                yAxis: {
                    type: "category",
                    data: axisData,
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisTick: "none",
                    axisLabel: {
                        interval: 0,
                        color: "#1A1A1A"
                    },
                },
                series: series,
            };
            const element = this.$echarts.init(document.getElementById(ele));
            if (element) {
                element.clear();
                element.setOption(option, true);
                // element.on('legendSelectchanged', (params, op) => {
                //     console.log(params)
                //     selected = params.selected;
                //     console.log(selected)
                //     getSeries(params.selected)
                //     element.clear();
                //     // console.log(option)
                //     element.setOption(option,false);
                // })
            }
        },
        getJDLChart(num) {
            let this_ = this;
            let option = {
                grid: {
                    left: 70,
                    right: 60,
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(128, 128, 128, 0.0001)',

                        }
                    },
                    formatter: "{b0}: {c0}%"
                },
                xAxis: {
                    show: false
                },
                yAxis: [{
                    type: "category",
                    data: ["鉴定率"],
                    axisLine: { show: false },
                    axisTick: [
                        {
                            show: false
                        }
                    ]
                }],
                series: [{
                    name: " ",
                    type: "bar",
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 10,
                            color: new this_.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                {
                                    offset: 1,
                                    color: "#2C89ED"
                                },
                                {
                                    offset: 0,
                                    color: "#76D5FE"
                                }
                            ])
                        }
                    },
                    barWidth: 20,
                    data: [num]
                },
                {
                    name: "背景",
                    type: "bar",
                    barWidth: 20,
                    barGap: "-100%",
                    data: [100],
                    label: {
                        show: true,
                        distance: 2,
                        position: "right",
                        color: "#1A1A1A",
                        formatter: function (params) {//核心部分 formatter 可以为字符串也可以是回调
                            if (params.value != 0) {//如果当前值存在则拼接
                                return num + '%'
                            } else {//否则返回个空
                                return '';
                            }
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: "#EEEEEE",
                            barBorderRadius: 10
                        }
                    }
                }
                ]
            };
            const element = this.$echarts.init(document.getElementById('jdlEchart'));
            if (element) {
                element.clear();
                element.setOption(option);
            }
        },
        getZLFSChart(res) {
            let this_ = this;
            let num = [], indicator = [];
            res.forEach((element, index) => {
                indicator.push({
                    name: element.name,
                })
                num.push(Number(element.value))
            });
            const maxCount = (function () {
                let count = 0;
                num.forEach((i) => {
                    if (i > count) count = i;
                });
                return count;
            })();
            indicator.forEach(items => {
                items['max'] = maxCount;
            })
            let option = {
                radar: {
                    radius: "50%", //大小
                    nameGap: 1, // 图中工艺等字距离图的距离
                    center: ["50%", "50%"], // 图的位置
                    name: {
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: '14',
                                    color: '#333',
                                    align: 'left',
                                    lineHeight: '20',
                                },
                                b: {
                                    fontSize: '14',
                                    color: '#1B8AE7',
                                    align: 'left',
                                }
                            },
                        },
                        formatter: function (params, index) {
                            let percent = "", value = '';
                            res.forEach(item => {
                                if (params == item.name) {
                                    value = item.value;
                                }
                            })
                            return '{a|' + params + '：}' + '{b|' + value + '户}'
                        },
                    },
                    indicator: indicator,
                    axisLine: {
                        lineStyle: {

                            color: "rgba(153, 209, 246, 0.2)"
                        }
                    },
                    splitArea: {
                        show: false,
                        areaStyle: {
                            color: "rgba(255,0,0,0)" // 图表背景的颜色
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: "rgba(153, 209, 246, 0.2)" // 设置网格的颜色
                        }
                    }
                },

                series: [
                    {
                        name: "",
                        type: "radar",
                        symbol: "angle",
                        itemStyle: {
                            normal: {
                                areaStyle: { type: "default" }
                            }
                        },
                        data: [
                            {
                                symbol: "circle",
                                symbolSize: 5,
                                value: num,
                                areaStyle: { color: "rgba(27, 138, 231, 0.5)" },
                                itemStyle: {
                                    normal: {
                                        borderWidth: 1,
                                        color: "#fff",
                                        borderColor: "#1B8AE7"
                                    }
                                },
                                lineStyle: {
                                    color: "#1B8AE7",
                                    width: 1
                                }
                            }
                        ]
                    }
                ]
            };
            const element = this.$echarts.init(document.getElementById('zlfsEchart'));
            if (element) {
                element.clear();
                element.setOption(option);
            }
        },
        //地市统计分析
        getDSTJFXEchart: async function (num, data) {
            let this_ = this;
            const option = {
                tooltip: {
                    trigger: "item",
                },
                series: [
                    {
                        type: "pie",
                        center: ["50%", "50%"],
                        radius: ["65%", "95%"],
                        clockwise: false,
                        avoidLabelOverlap: false,
                        hoverOffset: 15,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return this_.color[params.dataIndex];
                                },
                            },
                        },
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 14,
                            color: "#000",
                            formatter() {
                                return '{num|' + num + '户}\n{unit|未开工}'
                            },
                            rich: {
                                num: {
                                    fontSize: 18,
                                    color: "#117CD6",
                                },
                                unit: {
                                    fontSize: 14,
                                    color: "#1a1a1a",
                                },
                            }
                        },
                        labelLine: {
                            show: false,
                            length: 0,
                            length2: 0,
                        },
                        data: data,
                        animationDuration: 2800,
                        animationEasing: "cubicInOut",
                    },
                ],
            };
            const element = this.$echarts.init(document.getElementById("tzjdPie"));
            if (element) {
                element.clear();
                element.setOption(option);
            }
        },
        //排序
        sortByKey(array, key) {
            return array.sort(function (a, b) {
                var x = a[key];
                var y = b[key];
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            })
        },
        //进展排名
        getJZPMChart: async function (axisData, data, ele, unit) {
            let this_ = this;
            const option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
                    },
                },
                barWidth: 12,
                grid: {
                    top: "10",
                    left: "3%",
                    right: "30",
                    bottom: "10",
                    containLabel: true,
                },
                xAxis: {
                    name: unit ? unit : '',
                    type: "value",
                    minInterval: 1,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#CDCDCD",
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        color: "#1A1A1A"
                    },
                },
                yAxis: {
                    type: "category",
                    data: axisData,
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisTick: "none",
                    axisLabel: {
                        interval: 0,
                        color: "#1A1A1A"
                    },
                },
                series: [
                    {
                        name: '',
                        stack: 'total',
                        type: "bar",
                        label: {
                            show: true,
                            position: "right",
                            color: "#1A1A1A",
                            formatter: function (params) {//核心部分 formatter 可以为字符串也可以是回调
                                if (params.value != 0) {//如果当前值存在则拼接
                                    return params.value
                                } else {//否则返回个空
                                    return '';
                                }
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: new this_.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: "#3BAFFF"
                                    },
                                    {
                                        offset: 0,
                                        color: "#047AFF"
                                    }
                                ])
                            }
                        },
                        data: data,
                    },
                ],
            };
            const element = this.$echarts.init(document.getElementById(ele));
            if (element) {
                element.clear();
                element.setOption(option);
            }
        },
    },
    created() { },
    mounted() {
        dd.ready(() => {
            dd.setTitle({
                title: '统计分析',
            }).then((res) => {

            }).catch((err) => {
                console.error(err)
            })
        })
        this.getCitesData(330000000000, this.options)
        this.init()
    }
}
</script>

<style lang="scss" scoped>
#Statistics {
    width: 100%;
    height: 100vh;
    font-size: 14px;
    background: #F6F6F6;
    padding-bottom: 20px;

    .van-tabs {
        border-bottom: 1px solid #D2D2D2;
    }

    .searchWrap {
        clear: both;
        overflow: hidden;
        padding: 10px;
        background-color: #fff;

        .fieldWrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ccc;
        }
    }

    .scrollWrap {
        width: 100%;
        height: calc(100% - 140px);
        overflow-y: auto
    }

    .JFFWWrap {
        width: 100%;
        height: calc(100% - 90px);
        overflow-y: auto
    }

    .title {
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        position: relative;

        .van-button {
            position: absolute;
            right: 10px;
            top: 5px;
        }
    }

    .echartTitle {
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: #000;
        margin-top: 10px;
    }

    .JFSPLIST {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #fff;

        li {
            width: 32%;
            background: #E6F5FF;
            text-align: center;
            padding: 10px;
            line-height: 30px;

            img {
                height: 50px;
                width: auto;
            }
        }
    }

    .JFSPLIST1 {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: 10px;

        li {
            width: 32%;
            background: #E6F5FF;
            text-align: center;
            padding: 10px 0;

            img {
                height: 20px;
                width: auto;
            }

            p {
                margin: 6px 0;
            }
        }
    }

    .subTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #9b9b9b;
        position: relative;
        font-size: 16px;
        font-weight: 400;
        background-color: #fff;

        .line {
            display: inline-block;
            width: 2px;
            height: 30px;
            background: #007aff;
            margin-right: 0.14rem;
        }

        .van-button {
            position: absolute;
            right: 10px;
            top: 5px;
        }
    }

    .tzjdEchart {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        #tzjdPie,
        #wlsqyyqkPie {
            width: 110px;
            height: 150px;
        }

        .detail {
            width: calc(100% - 110px);

            p {
                width: 50%;
                float: left;
                margin-top: 5px;

                .yuan {
                    width: 8px;
                    height: 8px;
                    display: inline-block;
                    margin-right: 4px;
                    border-radius: 50%;
                }

                .num {
                    margin-left: 5px;
                }
            }
        }
    }

    #jfspEchart {
        width: 100%;
        background-color: #fff;
        height: 400px;
    }

    #sgzjEchart {
        width: 100%;
        background-color: #fff;
        height: 400px;
    }

    .subMain {
        width: 100%;
        background: #fff;
        padding: 0 10px;
        // margin-top: 10px;

        .tab {
            position: absolute;
            right: 0;

            li {
                padding: 0 10px;
                height: 30px;
                color: #1a1a1a;
                line-height: 30px;
                float: left;
                font-size: 12px;
                margin-left: 10px;
                border-radius: 4px;
                background: #eeeeee;
            }
        }

        .active {
            background: #007aff !important;
            color: #fff !important;
        }

        #jzpmEchart {
            width: 100%;
            height: 400px;
        }
    }

    .ywxtList li {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        margin-top: 10px;
    }

    .yswfLIST {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 10px;
        background-color: #fff;

        li {
            width: 48%;
            height: 70px;
            margin-top: 10px;
            padding-top: 15px;
            text-align: center;
        }
    }

    .KNQZLIST {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 10px;
        background-color: #fff;

        li {
            width: 45%;
            height: 70px;
            margin-top: 10px;
            display: flex;
            text-align: center;
            align-items: center;

            span {
                display: inline-block;
                width: 100%;
            }
        }
    }
}
</style>
<style lang="scss">
#Statistics {
    .van-field__control {
        text-align: right;
    }

    .el-table tr,
    .el-table td {
        color: #1e1f29 !important;
    }

    .el-table--border,
    .el-table--group {
        border: 1px solid #b1b1b1 !important;
    }

    .el-table--border td,
    .el-table--border th,
    .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
        border-right: 1px solid #b1b1b1 !important;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid #b1b1b1 !important;
    }

    .el-table__body tr:hover>td {
        background-color: #daeeff !important;
    }

    .el-table--border th.el-table__cell,
    .el-table__fixed-right-patch {
        border-bottom: 1px solid #b1b1b1 !important;
    }

    .el-dialog {
        box-shadow: #1e1f29;
    }

    .el-dialog__header {
        padding: 10px;
        background: #DDDDDD;
    }
}
</style>

